<template>
  <div class="app">
    <button @click="show = !show">toggle</button>
    <transition
      @enter="enter"
      @leave="leave"
    >
      <h2 v-if="show">hello world</h2>
    </transition>
  </div>
</template>
<script setup>
import gsap from 'gsap'
import { ref } from 'vue'
const show = ref(false)
const enter = (el, done) => {
  gsap.from(el, {
    scale: 0,
    x: 200,
    onComplete: done
  })
}
const leave = (el, done) => {
  gsap.to(el, {
    scale: 0,
    x: 200,
    onComplete: done
  })
}
</script>
<style lang="scss" scoped></style>
